<template>
	<view class="content">
		<view class="login-card">
			<!--  <image
            src="http://m.cloudhouse.live/%E6%88%BF%E5%AE%A2%E7%99%BB%E5%BD%95%E5%9B%BE.png"
            mode=""
            class="loginimg"
          /> -->
			<view class="p0">
				<image src="../../static/anxinsu/anxinsuLogo.png" mode="" class="loginimg " />
			</view>

			<view class="p1">欢迎来到安心宿</view>
			<view class="p2"> WELCIME TO PEACE HOUSE </view>
			<view class="flex flex-direction" style="padding: 0 20rpx;">
				<button v-if="checked&&sessionKeyOrOpenId.phoneNumber" class="cu-btn red" @click="getPhone">
					手机号一键登录
				</button>
				<button v-else-if="checked&&!sessionKeyOrOpenId.phoneNumber" class="cu-btn red"
					open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					手机号一键登录
				</button>
				<button v-else class="cu-btn red" @click="getTips">
					手机号一键登录
				</button>
			</view>
			<view class="flex flex-direction foot">
				<view class="tips" @click="CheckboxChange(true)">
					<view class="checkbox" v-if="checked">
						<text class="lg text-white" :class="'cuIcon-check'"></text>
					</view>
					<view class="checkbox2" v-else> </view>
					<text class="yiyuedu"></text>登录即代表您同意我们的
					<view @click="to('/pages/agreement/agreement')" style="display: inline-block">
						<text class="xieyi"> 服务协议 </text>和<text class="xieyi">
							隐私政策
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from "vuex";
	export default {
		data() {
			return {
				code: "",
				checked: false,
				sessionKeyOrOpenId: {

				}
			};
		},
		created() {
			this.getcode()
		},
		methods: {
			...mapMutations({
				setUser: "setUser",
				showM: "showM",
			}),
			getcode() {
				var that = this
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes)
						that.code = loginRes.code
						that.$http
							.post(
								'/app/getSessionKeyOrOpenId',
								that.$qs.stringify({
									code: that.code,
									appFlag: 1
								}), {
									header: {} /* 会覆盖全局header */ ,
									dataType: 'json',
									responseType: 'text'
								}
							).then(res => {
								const data = res.data
								if (data.code == 0) {
									that.sessionKeyOrOpenId = data.data
								}
								uni.hideLoading()
							})
					}
				})
			},
			getTips() {
				uni.showToast({
					icon: "none",
					title: "请先同意协议",
					duration: 2000,
					mask: true,
				});
			},
			CheckboxChange(e) {
				this.checked = !this.checked;
			},
			to(name) {
				console.log("aaa");
				uni.navigateTo({
					url: name,
				});
			},
			login() {
				uni.request({
					url: "https://www.example.com/request", //仅为示例，并非真实接口地址。
					data: {
						text: "uni.request",
					},
					header: {
						"custom-header": "hello", //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data);
						this.text = "request success";
					},
				});
			},
			getPhone() {
				uni.setStorageSync('phone', this.sessionKeyOrOpenId.phoneNumber)
				this.setUser(this.sessionKeyOrOpenId.phoneNumber)
				uni.showToast({
					title: '登录成功',
					duration: 2000,
					mask: true
				})
				uni.navigateBack({
					delta: 1
				})
			},
			getPhoneNumber(e) {
				var that = this
				console.log(e.detail.errMsg)
				console.log(e.detail.iv)
				console.log(e.detail.encryptedData)
				console.log(e)
				if (e.detail.errMsg != 'getPhoneNumber:ok') {
					return
				}
				uni.showLoading({
					title: '登录中',
					mask: true
				})

				that.$http
					.post(
						'/app/decryptPhoneNumber',
						that.$qs.stringify({
							iv: e.detail.iv,
							sessionKey: that.sessionKeyOrOpenId.session_key,
							encryptedData: e.detail.encryptedData
						}), {
							header: {} /* 会覆盖全局header */ ,
							dataType: 'json',
							responseType: 'text'
						}
					)
					.then((res) => {
						console.log(res)

						const data = res.data
						if (data.code == 0) {
							setTimeout(function() {
								uni.hideLoading()
							}, 500)
							uni.setStorageSync('phone', data.msg)
							that.setUser(data.msg)
							uni.showToast({
								title: '登录成功',
								duration: 2000,
								mask: true
							})
							that.$http
								.post(
									'/app/updateOpenId', {
										phoneNumber: data.msg,
										openId: that.sessionKeyOrOpenId.openid,
										appFlag: 1
									}, {
										header: {} /* 会覆盖全局header */ ,
										dataType: 'json',
										responseType: 'text'
									}
								)
							uni.navigateBack({
								delta: 1
							})
						} else {
							uni.showToast({
								image: '/static/img/warn.png',
								title: data.msg,
								duration: 2000,
								mask: true
							})
						}
					})
			}
		},
	};
</script>

<style>
	page {
		background: white;
	}

	.p0 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 205rpx;
		padding-top:450rpx;
	}

	.p1 {
		font-size: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang SC;
		font-weight: bold;
		align-items: center;
		color: #171717;
		margin-top: 160rpx;
	}

	.p2 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		align-items: center;
		color: #171717;
	}

	.loginimg {
		width: 230rpx;
		height: 205rpx;
	}

	.content {
		height: 100%;
		flex-direction: column;
	}


	.landing {
		height: 84upx;
		line-height: 84upx;
		border-radius: 44upx;
		font-size: 32upx;
		background: #4382ff;
	}

	.login-btn {
		padding: 10upx 20upx;
		margin-top: 350upx;
	}

	.login-function {
		overflow: auto;
		padding: 20upx 20upx 30upx 20upx;
	}

	.login-forget {
		float: left;
		font-size: 26upx;
		color: #999;
	}

	.login-register {
		color: #666;
		float: right;
		font-size: 26upx;
	}

	.login-input input {
		background: #f8f8f8;
		font-size: 28upx;
		padding: 10upx 25upx;
		height: 62upx;
		line-height: 62upx;
		border-radius: 8upx;
	}

	.login-margin-b {
		margin-bottom: 25upx;
	}

	.login-input {
		padding: 10upx 20upx;
	}

	.login-head {
		font-size: 46upx;
		text-align: center;
		padding: 25upx 10upx 55upx 10upx;
		display: flex;
		justify-content: center;
	}

	.login-card {
		background: #fff;
		border-radius: 12upx;
		padding: 0upx 44upx;
		position: relative;
		/* margin-top: 120upx; */
	}


	.liji {
		font-size: 24upx;
		color: #787878;
	}

	.lijil,
	.lijir {
		color: #4382ff;
	}

	.lijir {
		margin-left: 10upx;
	}

	.red {
		margin-top: 320rpx;
		color: white;
		height: 88upx;
		border-radius: 44upx;
		background: linear-gradient(180deg, #3c6cfc 0%, #3c6cfc 40%, #3c6cfc 100%);
	}

	.xieyi {
		color: #a9befe;
	}

	.yiyuedu {
		color: #7c7c7c;
	}

	.foot {
		justify-content: center;
		align-items: center;
		padding-top:42rpx;
	}

	.banner {
		width: 100%;
		/* position: absolute; */
		/* bottom: 42px; */
		height: 164upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ffa98a;
	}

	.hubg {
		position: absolute;
		top: 0;
		height: 400rpx;
		z-index: -1;
		width: 100%;
	}

	.userAvatarUrl {
		height: 100px;
		width: 100px;
	}

	.userinfo-avatars {
		overflow: hidden;
		display: block;
		width: 211rpx;
		height: 230rpx;
		margin: 20rpx;
		/* border-radius: 50%; */
		border: 2px solid #fff;
		/* box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); */
		/* margin-left: 10px; */
	}

	.logo {
		height: 100%;
		width: 100%;
	}

	.tip {
		text-align: center;
	}

	.login-banner {
		height: 625upx;
	}

	.tips {
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		margin-top: 10rpx;
		font-size: 12px;
	}

	.checkbox {
		height: 16px;
		width: 16px;
		display: flex;
		border-radius: 2px;
		background: #4382ff;
		align-items: center;
		justify-content: center;
		margin-right: 5px;
		color: white;
		border: 1px solid #4382ff;
		cursor: "pointer";
	}

	.checkbox2 {
		height: 16px;
		width: 16px;
		display: flex;
		border-radius: 2px;
		background: white;
		align-items: center;
		justify-content: center;
		margin-right: 5px;
		color: white;
		border: 1px solid #4382ff;
		cursor: "pointer";
	}
</style>